import React from 'react'

interface Props {
  isShow: boolean
  array: { temp: string; user: string; img: string }[]
  src: string
  state: boolean
}

const Index: React.FC<Props> = ({ src, isShow, array, state }) => {
  return (
    <>
      {isShow ? (
        <div className={`container ${state ? 'image1' : 'image2'} chat`}>
          {array.length ? (
            array.map((item, index) => {
              if (item.temp) {
                return (
                  <div
                    className={`container ${item.user} chat-context`}
                    key={index}
                  >
                    <img
                      src={item.img}
                      style={{
                        width: '40px',
                        height: '40px',
                        borderRadius: '50%',
                        margin: '0 10px',
                        display: item.user === 'ai' ? '' : 'none'
                      }}
                      alt=""
                    />
                    <span>{item.temp}</span>
                    <img
                      src={item.img}
                      style={{
                        width: '40px',
                        height: '40px',
                        borderRadius: '50%',
                        margin: '0 10px',
                        display: item.user === 'user' ? '' : 'none'
                      }}
                      alt=""
                    />
                  </div>
                )
              }
            })
          ) : (
            <div></div>
          )}
        </div>
      ) : (
        <video controls>
          <source src={src} type="video/mp4" />
        </video>
      )}
    </>
  )
}

export default Index
